<main class="app-content" id="sceneryInfoDiv">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i> {{scenery.sceneryName}}</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">景点详情</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"
                         style="margin-bottom: 50px;border: 3px dotted seagreen">
                        <div class="carousel-inner">
                            <div class="carousel-item" v-for="(image,index) in scenery.images"
                                 :class="[index==0?'active':'']" align="center">
                                <img :src="image.image" class="d-block" alt="image.imageId"
                                     style="height: 500px;overflow: hidden;">
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleControls" role="button"
                           data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleControls" role="button"
                           data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <div>
                        <div class="clearfix" style="margin-bottom: 50px;">
                            <div class="float-left" style="width: 40%;">
                                <span style="color: seagreen">
                                    地址：
                                </span>
                                <p>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{scenery.sceneryLocation}}
                                </p>
                                <span style="color: seagreen">
                                    简介：
                                </span>
                                <p>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{scenery.sceneryDetail}}
                                </p>

                            </div>
                            <div class="float-right" style="color: seagreen;width: 40%">
                                <div style="width: 30rem;">
                                    <span style="width: 100%;">联系方式</span>
                                    <ul class="list-group list-group-horizontal">
                                        <li class="list-group-item" style="width: 20%;">手机号码</li>
                                        <li class="list-group-item" style="width: 80%">{{scenery.user.userPhone}}</li>
                                    </ul>
                                    <ul class="list-group list-group-horizontal">
                                        <li class="list-group-item" style="width: 20%;">邮箱</li>
                                        <li class="list-group-item" style="width: 80%">{{scenery.user.userEmail}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <span>
                            留言：
                        </span>
                        <span>
                            <a class="btn btn-success" data-toggle="modal" data-target="#editModal"
                               onclick="initMessage()">
                            <i class="fa fa-edit m-right-xs"></i>留言
                        </a>
                        </span>


                        <div class="clearfix">
                            <div class="col-md-6 float-left" v-for="(message,index) in scenery.messages">
                                <div class="tile">
                                    <div class="tile-title-w-btn">
                                        <h3 class="title"></h3>
                                        <div class="btn-group">
                                        </div>
                                    </div>
                                    <div class="tile-body">
                                        <pre>{{message.messageDetail}}</pre>
                                        <span>{{message.createTime}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="pages/messageEdit"></div>
</main>
<style>
    p {
        color: #8fdf82;
        white-space: -moz-pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
    }
</style>
<script>
    var sceneryInfoVue = new Vue({
        el: "#sceneryInfoDiv",
        data: {
            scenery: {
                sceneryId: "",
                sceneryName: "",
                sceneryDetail: "",
                sceneryLocation: "",
                images: "",
                messages: "",
                user: ""
            },
            message: {
                messageId: "",
                messageDetail: "",
                createTime: "",
                sceneryId: "",
                user: {}
            }
        },
        methods: {
            initPage: function () {
                var self = this;
                var id = sessionStorage.getItem("sceneryId");
                self.scenery.sceneryId = id;
                $.ajax({
                    url: "/api/scenery/" + self.scenery.sceneryId,
                    type: "get",
                    success: function (rs) {
                        self.scenery = rs;
                        console.log(rs);
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            initMessage: function () {
                var self = this;
                self.message = {
                    sceneryId: sessionStorage.getItem("sceneryId"),
                    user:{
                        userId:$("#userId").val()
                    }
                };
            },
            updateModule: function () {
                var self = this;
                if (self.message.messageDetail === "") {
                    layer.alert("不能为空", {icon: 0});
                } else {
                    $.ajax({
                        url: "/api/message",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(self.message),
                        success: function (rs) {
                            if (rs.status === 200) {
                                window.location.reload();
                            } else {
                                layer.alert(rs.message, {icon: 0});
                            }
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    })
                }
            }
        },
        created: function () {
            window.initMessage = this.initMessage
        },
        mounted: function () {
            this.initPage();
        }
    })
</script>